html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
body{
/*font: caption;*/
font-family: 'Open Sans', sans-serif, 'Helvetica Neue', 'Lucida Grande';
font-size: 16px;
text-align: center;
color: white;
}
body, h1,h2,h3, h4, p{
margin:0;
padding:0;
}
.main-cont {
width: 100%;
height: 100%;
position: fixed;
background: -webkit-linear-gradient(left, #CC0000 0%, #FF5100 100%);
background: linear-gradient(to right, #57ebd7 0%, #24a88b 100%);
/*linear-gradient(90deg, #CC0000 0%, #FF5100 100%);*/
z-index: -4;
}
#mobile-text-input {
position: absolute;
top:-500px;
left:-500px;
}
#show-keyboard-button {
margin: 40px 0 0 0;
display: none;
}
#show-keyboard-button:hover{
background: none;
color: white;
}
#about-cont{
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
padding: 20px;
z-index: 1;
display: none;
}
.content-wrapper{
width: 600px;
margin: 0 auto;
position: relative;
height: 100%;
}
.content-wrapper, .char-cont {
padding: 0 20px;
}
.about-white-bg {
background: rgba(255, 255, 255, 1);
padding: 20px;
color: #333;
border-radius: 4px;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
width: 100%;
}
.about-text {
color: #666666;
}
.about-text a{
color: #CC0000;
text-decoration: none;
}
.about-text a:hover {
text-decoration: underline;
}
.about-image {
background:url('https://mahdif.github.io/alphabets-game/images/omgomgomg.gif') center no-repeat;
width:100%;
height:150px;
margin: 20px 0;
}
hr {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.1);
margin: 20px 0;
}
.about-title {
font-size: 24px;
font-weight: 400;
}
#hide-button {
padding: 10px 20px;
margin: 20px 0 0 0;
background: white;
border: 1px solid rgba(0,0,0,0.2);
font-size: 16px;
border-radius: 2px;
color: rgba(0,0,0,0.7);
cursor: pointer;
}
#hide-button:hover {
background: #CC0000;
color: white;
}
#hide-button:active {
background: #980000;
color: white;
}
.char-cont {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}
.char {
font-size: 160px;
font-weight: 300;
position: relative;
}
.animationHabibi {
animation: growAnimation 0.2s ease-in-out 0s;
-webkit-animation: growAnimation 0.2s ease-in-out 0s;
-moz-animation: growAnimation 0.2s ease-in-out 0s;
}
footer {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
z-index: -2;
}
.habibi-button {
display: inline-block;
margin: 0 10px;
padding: 14px 30px;
font-size: 14px;
background: none;
color: white;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 2px;
cursor: pointer;
}
.habibi-button:hover {
background: white;
color: #DB1010;
}
.habibi-button:active {
background: rgba(0,0,0,0.4);
border-color: rgba(0, 0, 0, 0);
color: white;
}
/* Make me responsive */
@media screen and (max-width: 800px){
body {
font-size: 14px;
}
.about-title {
font-size: 18px;
}
.char {
font-size: 80px;
}
.content-wrapper {
width: 100%;
overflow: auto;
}
.char-cont {
position: relative;
-webkit-transform: none;
transform: none;
top: 0;
margin: 40px 0 20px 0;
}
.animationHabibi {
-webkit-animation: none;
animation: none;
}
#show-keyboard-button {
display: inline-block;
}
footer {
position: relative;
margin-top: 200px;
bottom: 0;
}
}
@media screen and (max-width: 600px){
.char {
font-size: 50px;
}
.about-image {
height: 90px;
background-size: 90%;
}
}
/*
Animation habibi
*/
@-webkit-keyframes growAnimation {
0% {
opacity: 0;
font-size: 0;
}
100% {
opacity: 1;
font-size: 160px;
}
}
@keyframes growAnimation {
0% {
opacity: 0;
font-size: 0;
}
100% {
opacity: 1;
font-size: 160px;
}
}